import React, { useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ReactEcharts from 'echarts-for-react';

export default () => {
  const instance = useRef(null);
  const lineOption = () => {
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        data: [
          '直达',
          '营销广告',
          '搜索引擎',
          '邮件营销',
          '联盟广告',
          '视频广告',
          '百度',
          '谷歌',
          '必应',
          '其他',
        ],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: '搜索引擎' },
            { value: 775, name: '直达' },
            { value: 679, name: '营销广告', selected: true },
          ],
        },
        {
          name: '访问来源',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30,
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,

            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center',
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33,
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: 1048, name: '百度' },
            { value: 335, name: '直达' },
            { value: 310, name: '邮件营销' },
            { value: 251, name: '谷歌' },
            { value: 234, name: '联盟广告' },
            { value: 147, name: '必应' },
            { value: 135, name: '视频广告' },
            { value: 102, name: '其他' },
          ],
        },
      ],
    };
    return option;
  };
  const onChartClick = (param, echarts) => {
    console.log(param, echarts);
  };
  const onChartLegendselectchanged = (param, echarts) => {
    console.log(param, echarts);
  };
  //   const resize = () => {
  //     instance.current && instance.current.echarts.resize();
  //   };
  useEffect(() => {
    console.log(instance.current);

    // window.addEventListener('resize', instance.current.echarts.resize());
  }, []);
  return (
    <PageContainer>
      <ReactEcharts
        ref={instance}
        option={lineOption()}
        onEvents={{
          click: onChartClick,
          mousedown: onChartClick,
          legendselectchanged: onChartLegendselectchanged,
        }}
      ></ReactEcharts>
    </PageContainer>
  );
};
